<template>
    <div style="height: 100%">
      <el-container>
      <el-header style="background-color: #2C9CEC">

        <div>
          <div style="float:left;width: 90%;text-align: left;line-height: 30px;">
            <div>
              <span style="float: left"><h1 style="color: brown;">XXXXX系统</h1>  </span>
              <span  style="float: left;margin-top:20px;margin-left: 10px">
                 <i :class="tupian"  @click="openOrClose"></i>
              </span>
            </div>
          </div>
          <div style="float: left;width:8%;">
            <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link" style="color: white">
                       <i class="el-icon-setting"></i>
                  </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="A">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

        </div>

      </el-header>

      <el-container>
        <el-aside :style="{width:asideWidth,height:asideHeight}" style="background-color: #545C64">
          <el-scrollbar style="height: 100%;">
          <el-menu
            :unique-opened="uniqueOpen"
            style="border-color: #545c64"
            ref="menuId"
            :collapse="isCollapse"
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">


            <el-submenu :index="getIndex(m1.id)" v-for="(m1,m1Index) of menus" :key="m1Index">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">{{m1.menuName}}</span>
              </template>

              <el-submenu :index="getIndex(m1.id)+'-'+getIndex(m2.id)" v-for="(m2,m2Index) of m1.menuList" :key="m2Index">
                <template slot="title">{{m2.menuName}}</template>
                <el-menu-item :index="getIndex(m1.id)+'-'+getIndex(m2.id)+'-'+getIndex(m3.id)"  v-for="(m3,m3Index) of m2.menuList" :key="m3Index"  @click="toPage(m3.url)">{{m3.menuName}}</el-menu-item>
              </el-submenu>

            </el-submenu>


          </el-menu>

          </el-scrollbar>
        </el-aside>
        <el-main :style="{height:asideHeight,width:mainWidth}" >

          <router-view></router-view>

        </el-main>
      </el-container>
      </el-container>


    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
          return {
            uniqueOpen: true,
            tupian:"el-icon-s-unfold",
            isCollapse:true,
            asideWidth:64+'px',
            asideHeight: window.innerHeight-60+'px',
            mainWidth:window.innerWidth-64+'px',
            menus:[]
          }
        },
        methods:{
          openOrClose(){//开关左侧栏
             if(this.isCollapse){
               this.isCollapse=false;
               this.asideWidth=209+'px';
               this.mainWidth=window.innerWidth-209+'px';
               this.tupian="el-icon-s-fold"
             }else{
               this.isCollapse=true;
               this.asideWidth=64+'px';
               this.mainWidth=window.innerWidth-64+'px';
               this.tupian="el-icon-s-unfold"
             }
          },
          toPage(path){
            this.$router.push({path:path})
          },
          getIndex(id){
            return ""+id;
          },
          handleCommand (commond) {

            if(commond=="A"){//退出
              this.$axios.post(this.$myInfo.loginPath+"login/toLoginOut").then((response) => {
                if(response.data.code==200){
                  //清除sessionStorge
                  sessionStorage.removeItem("state")
                  //清空权限信息
                  sessionStorage.removeItem("menus")
                  //跳转到登录界面
                  this.$router.push({path:"/"})
                }
              }).catch((Error) => {
                //跳转到登录界面
                this.$router.push({path:"/"})
              })
            }
          }
        },
      mounted: function () {
        let listMenus=sessionStorage.getItem("menus");
        if(listMenus==null){
          this.$axios.post(this.$myInfo.loginPath+"menu/getMenuList").then((response)=>{
               this.menus=response.data.result
               //存储sessionStorge一份
               sessionStorage.setItem("menus",JSON.stringify(this.menus))
          })

        }else{
           this.menus=JSON.parse(listMenus);
        }

      }
    }
</script>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .el-aside {
    background-color: #D3DCE6;
    height: 100%;
    color: #333;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;

    padding: 0px;
  }

  body > .el-container {
    margin-bottom: 0px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-scrollbar__wrap{
    overflow-x:hidden;
  }
</style>
